<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>优惠券</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/alert.js"></script>
    <link rel="stylesheet" href="css/weui.css"/>
</head>
<body style="background-color: #ececec">
<div class="page navbar js_show">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-navbar">
                <div id="can-s" class="weui-navbar__item weui-bar__item_on">
                    待使用
                </div>
                <div id="alr-s" class="weui-navbar__item">
                    已使用
                </div>
                <div id="old-s" class="weui-navbar__item ">
                    已过期
                </div>
            </div>
            <div class="weui-tab__panel">
                <div id="can" style="display: block">

                </div>
                <div id="alr" style="display: none">
                    已使用
                </div>
                <div id="old" style="display: none">
                    已过期
                </div>

            </div>
        </div>
    </div>
</div>

</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
        $('#can-s').on('click', function () {
            $('#can').css("display","block");
            $('#alr').css("display","none");
            $('#old').css("display","none");
        });
        $('#alr-s').on('click', function () {
            $('#can').css("display","none");
            $('#alr').css("display","block");
            $('#old').css("display","none");
        });
        $('#old-s').on('click', function () {
            $('#can').css("display","none");
            $('#alr').css("display","none");
            $('#old').css("display","block");
        });
    });
</script>
</html>